<!-- Copyright 2010 John L. Reilly

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.  -->

<%@ page import="java.util.List"%>
<%@ page import="com.riq.entity.Location"%>
<%@ page import="com.riq.entity.Department"%>
<%@ page import="com.riq.entity.Status"%>
<%@ page import="com.riq.ServletUtilities"%>
<%@ page import="java.util.logging.Logger"%>
<%@ page import="java.io.IOException"%>
<%@ page import="javax.servlet.*"%>

<%

Department d = (Department) request.getAttribute("dept");
List<Status> statuses = (List<Status>) request.getAttribute("statuses");

%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>FirstResponder</title>

<!--META-->
<meta http-equiv="content-type"  content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width" />

<!--STYLESHEET-->
<link rel="stylesheet" type="text/css" href="stylesheets/static.css" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var deptLayer =  null;
var map;
var marker;

function initialize() {
	  
  var myLatlng = 
	  new google.maps.LatLng(<%=d.getcoordinatesLatitude()%>,<%=d.getcoordinatesLongitude()%>);
  var myOptions = {
    zoom: 14,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
  }  

  var timestamp = new Date().getTime();
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  google.maps.event.addListener(map, 'click', function(event) {
     placeMarker(event.latLng);
  });
  

}


function placeMarker(location) {
  if (marker) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
        position: location, 
        map: map,
        draggable: true
    });
    google.maps.event.addListener(marker, 'position_changed', showPosition);
    showPosition();
  }
}


function showPosition() {
  document.getElementById("latitude").innerHTML  = marker.getPosition().lat();
  document.getElementById("longitude").innerHTML = marker.getPosition().lng(); 
  document.getElementById("lat").value = marker.getPosition().lat();
  document.getElementById("lng").value = marker.getPosition().lng(); 
}


function show_hide(show, hide)
{
document.getElementById(show).style.display="block";
document.getElementById(hide).style.display="none";
}

</script>

</head>
<body onload="initialize()">

<!--FIXED HEADERS-->
<div class="headwrap">
<div class="hBlack">
<div class="headerLeftTop">FirstResponder</div>
<div class="headerRightTop">ver 0.9</div>
<div class="headerLeftBottom">Location: Create</div>
<div class="headerRightBottom">12:34 PM</div>
</div>
<div class="hGray">
  <a class="buttonGrayHdr" href="mainMenu.html">Main</a>
  <a class="buttonGrayHdr" href="commandMenu.html">Command</a>
  <a class="buttonGrayHdr gSelected" href="department?action=display">Admin</a>
</div>
<div class="headerMist"></div>
</div>

<div class="outwrap">
<div class="headerPlug"></div>

<!--BUTTONS-->
<div id="centeredButtons"><ul><li>
<a class="button blue narrow tall first last"
   href="department?action=display">
   Cancel</a></li><li>
<a class="button green narrow tall first last"
   href="#" onclick="javascript:document.forms[0].submit();return false;">
   Save</a>
</li></ul></div>

<form method="post" action="location?action=create">
<input type=hidden name="deptId" value="<%=d.getid()%>"></input>
<input type="hidden" id="lat" name="lastLat"></input>
<input type="hidden" id="lng" name="lastLng"></input>

<div class="row">Short Name:</div>
<input class="inputfield" type="input" name="shortName" />
<div class="row">Long Name:</div>
<input class="inputfield" type="input" name="longName" />
<div class="row">Type:</div>
<input class="inputfield" type="input" name="type"/>
<div class="row">Sequence:</div>
<input class="inputfield" type="input" name="sequence" />
<div class="row">Position:</div>
<div class="radioContainer">
<input class="radioButton" type="radio" name="position" 
onClick="show_hide('dynamic', 'static')" value="dynamic" />Dynamic</input>
<input class="radioButton" type="radio" name="position" 
onClick="show_hide('static', 'dynamic')" value="static" checked/>Static</input>
</div>

<div id="dynamic" style="display: none;">
<div class="row">Latitude ID (optional):</div>
<input class="inputfield" type="input" name="latitudeId" />
</div>

<div id="static" style="display: block;">
<div class="sub black">Set Static Position:</div> 
<div class="mapWrapper" style="width: 100%; padding: 10px;">
<div style="height: 400px; width: 100%; clear:left; float: left" id="map_canvas"></div>
</div>
<div class="row" style="min-width: 250px">Dept Latitude:</div>
<div id="latitude" class="row" style="clear: none; width: 40%; overflow: hidden"></div>
<div class="row" style="min-width: 250px">Dept Longitude:</div>
<div id="longitude" class="row" style="clear: none; width: 40%; overflow: hidden"></div>
</div>



<div class="row">Call-In Phone Number Association:</div>
<div class="radioContainer">
<input class="radioButton" type="radio" name="vru" value="0">None</input>
<input class="radioButton" type="radio" name="vru" value="1">VRU1</input>
<input class="radioButton" type="radio" name="vru" value="2">VRU2</input>
<input class="radioButton" type="radio" name="vru" value="3">VRU3</input>
</div>
<div class="row">Presented During Initial Phase?:</div>
<div class="radioContainer">
<input class="radioButton" type="radio" name="special" value="yes"/>Yes</input>
<input class="radioButton" type="radio" name="special" value="no"/>No</input>
</div>

<div class="sub black">Associated Status List</div>

<% if (statuses.isEmpty()){ %>
   <div class="row" style="color: red;">
   No Statuses have been created for this Department
   </div> 

<%    
   } else {

 // determine if each Status checkbox should be checked for this Location
 String tempStatus = "temp";
 for (Status s : statuses) {
   
   if (!tempStatus.equalsIgnoreCase(s.gettype())) { %>
   <div class="sub white"><%=s.gettype()%></div> <% } %>
          
   <div class="row" style="width: 80%"><%=s.getshortName()%></div>
   <div class="row right" style="width: 15%">
   <input type="checkbox" name="statusId" value="<%=s.getid()%>" />
   </div>
   
   <% if (!s.gettype().isEmpty()) {
          tempStatus = s.gettype().toString(); } 
   }
 }
%>

</form>

<!--BUTTONS-->
<div id="centeredButtons"><ul><li>
<a class="button blue narrow tall first last"
   href="department?action=display">
   Cancel</a></li><li>
<a class="button green narrow tall first last"
   href="#" onclick="javascript:document.forms[0].submit();return false;">
   Save</a>
</li></ul></div>

<div class="hints">Quick Hints:</div>
<div class="reportWrapper">
Position: This field refers to whether or not this Location is geographically fixed.  For instance,
a firehouse, hospital or draft site would have fixed gps coordinates where a vehicle would not.
</div>

<!--FOOTER-->
<div class="footer">FirstResponder</div>

<!--OUTLINE WRAPPER -->
</div> 

</body>
</html>

